<template>
  <div class="container-fluid">
    <!-- 顶部导航栏 -->
    <header class="col-md-12 bg-primary text-white p-3">
      <div class="row align-items-center">
        <div class="col-md-6">
          <h1>停车场管理系统</h1>
        </div>
        <div class="col-md-6 d-flex justify-content-end">
          <span class="mr-2">{{ username }}</span>
          <router-link to="/" class="btn btn-light mr-2">返回首页</router-link>
          <button @click="logout" class="btn btn-light">退出</button>
        </div>
      </div>
    </header>

    <!-- 主内容区域 -->
    <main class="col-md-12 mt-4">
      <div class="card">
        <div class="card-header bg-secondary text-white">
          <h2 class="text-center">临时车辆管理</h2>
        </div>
        <div class="card-body">
          <!-- 入场表单区域 - 包含表单和空闲车位信息 -->
          <div class="mb-6 p-4 bg-light rounded" style="position: relative;">
            <!-- 空闲车位信息盒子 -->
            <div class="position-absolute right-0 top-0" style="height: 100%; display: flex; align-items: center; right: 100px;">
              <div class="bg-success text-white p-5 rounded shadow-lg" style="min-width: 150px;">
                <h4 class="text-center mb-2">空闲临时车位</h4>
                <p class="text-center font-bold text-2xl" id="availableParkingCount">{{ availableTempSpacesCount }}</p>
                <!-- 隐藏域存储后端random-space接口返回的Map集合 -->
                <input type="hidden" id="availableTempSpaceInfo" :value="JSON.stringify(availableTempSpaceInfo)">
              </div>
            </div>
            
            <!-- 表单内容 -->
            <h3 class="mb-3 text-center">车辆入场登记</h3>
            <div class="mx-auto" style="max-width: 50%;">
            <form @submit.prevent="confirmEntry">
                <div class="row mb-3 justify-content-center">
                  <div class="col-12 col-md-8">
                    <label for="plateNumber" class="form-label">车牌号</label>
                    <input type="text" id="plateNumber" v-model="entryForm.plateNumber" class="form-control" placeholder="请输入车牌号" required>
                  </div>
                </div>
                <div class="row mb-3 justify-content-center">
                  <div class="col-12 col-md-8">
                    <label for="vehicleType" class="form-label">车辆类型</label>
                    <input type="text" id="vehicleType" value="临时车" class="form-control bg-secondary text-white" readonly>
                    <input type="hidden" v-model="entryForm.vehicleType" value="0">
                  </div>
                </div>
                <div class="row mb-3 justify-content-center">
                  <div class="col-12 col-md-8">
                    <label for="owner" class="form-label">所属人</label>
                    <input type="text" id="owner" v-model="entryForm.owner" class="form-control" placeholder="请输入所属人姓名">
                  </div>
                </div>
                <div class="row mb-3 justify-content-center">
                  <div class="col-12 col-md-8">
                    <label for="phone" class="form-label">电话</label>
                    <input type="tel" id="phone" v-model="entryForm.phone" class="form-control" placeholder="请输入联系电话">
                  </div>
                </div>
                <div class="row justify-content-center mt-2">
                <div class="col-md-4 text-center">
                  <button type="submit" class="btn btn-success w-50">确认入场</button>
                </div>
              </div>
            </form>
            </div>
          </div>
          
          <div class="w-75 mx-auto">
            <table class="table table-bordered">
            <thead>
              <tr>
                <th>车牌号</th>
                <th>车辆类型</th>
                <th>入场时间</th>
                <th>状态</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="entry in tempEntries" :key="entry.id">
                <td>{{ entry.plateNumber }}</td>
                <td>{{ formatVehicleType(entry.type) }}</td>
                <td>{{ entry.entryTime }}</td>
                <td>
                  <span :class="{
                    'text-success': entry.status === 0,
                    'text-info': entry.status === 1
                  }">
                    {{ entry.status === 0 ? '在场' : '已离场' }}
                  </span>
                </td>
              </tr>
            </tbody>
            </table>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import axios from '@/utils/axios'
export default {
  name: 'TempEntryView',
  data() {
    return {
      username: '',
      tempEntries: [],
      entryForm: {
          plateNumber: '',
          vehicleType: '0', // 默认设置为临时车
          owner: '',
          phone: ''
        },
      availableTempSpacesCount: 0,
      availableTempSpaceInfo: {} // 存储random-space接口返回的数据
    }
  },
  mounted() {
    this.username = localStorage.getItem('username') || '管理员'
    this.loadTempEntries()
    this.loadAvailableTempSpacesCount()
    this.loadRandomAvailableTempSpace() // 加载随机可用临时车位信息
  },
  methods: {
    logout() {
      localStorage.removeItem('isLoggedIn')
      localStorage.removeItem('username')
      this.$router.push('/login')
    },
    
    // 格式化车辆类型显示
    formatVehicleType(type) {
      // 添加调试信息，查看实际的车辆类型值和类型
      console.log('车辆类型值:', type, '类型:', typeof type);
      
      // 转换为数字类型进行比较
      const typeNum = Number(type);
      
      switch(typeNum) {
        case 0:
          return '临时车'
        case 1:
          return '月租车'
        case 2:
          return '年租车'
        default:
          return '未知'
      }
    },
    
    // 加载空闲临时车位数量
    loadAvailableTempSpacesCount() {
      // 使用基于axios.js配置的相对路径
      axios.get('/temp-entry/available-count')
        .then(response => {
          // 由于axios响应拦截器直接返回了response.data
          // 所以这里的response已经是后端返回的data对象
          let data = response || {};
          
          // 获取空闲临时车位数量
          this.availableTempSpacesCount = data.availableCount || 0;
          
          // 添加调试信息，便于排查问题
          console.log('后端返回的空闲临时车位数量:', data);
          console.log('设置的空闲临时车位数量:', this.availableTempSpacesCount);
        })
        .catch(error => {
          console.error('获取空闲临时车位数量失败:', error);
          // 错误处理：保持默认值
          this.availableTempSpacesCount = 0;
        })
    },
    
    // 加载随机可用临时车位信息
    loadRandomAvailableTempSpace() {
      // 使用基于axios.js配置的相对路径
      axios.get('/temp-entry/random-space')
        .then(response => {
          // 由于axios响应拦截器直接返回了response.data
          // 所以这里的response已经是后端返回的data对象
          let data = response || {};
          
          // 保存后端返回的完整Map集合
          this.availableTempSpaceInfo = data;
          
          // 添加调试信息，便于排查问题
          console.log('后端返回的随机可用临时车位信息:', data);
          console.log('从后台传上来的Map集合:', this.availableTempSpaceInfo);
          
          // 如果需要更详细地展示map内容，可以遍历输出
          console.log('Map集合详细内容:');
          for (let key in this.availableTempSpaceInfo) {
            if (Object.prototype.hasOwnProperty.call(this.availableTempSpaceInfo, key)) {
              console.log(`${key}: ${this.availableTempSpaceInfo[key]}`);
            }
          }
        })
        .catch(error => {
          console.error('获取随机可用临时车位信息失败:', error);
          // 错误处理：保持默认值
          this.availableTempSpaceInfo = {};
          
          // 输出错误信息到控制台
          console.log('当前的后端Map集合(错误状态):', this.availableTempSpaceInfo);
        })
    },
    
    loadTempEntries() {
      // 调用后端API获取今天的停车记录和车辆信息 - 使用基于axios.js配置的相对路径
      axios.get('/parking-records-vehicles/today')
        .then(response => {
          // 添加调试信息，查看完整的响应数据
          console.log('API响应数据:', response);
          
          // 处理响应数据，确保数据结构与前端表格匹配
          // 检查response是否为有效对象
          let data = [];
          if (response && response.data) {
            // 标准axios响应结构
            data = response.data;
          } else if (response) {
            // 非标准响应，直接使用
            data = response;
          }
          
          this.tempEntries = data.map(item => ({
            id: item.id || Date.now(),
            plateNumber: item.plateNumber || '未知',
            type: item.type !== undefined ? item.type : -1,
            entryTime: item.entryTime ? new Date(item.entryTime).toLocaleString('zh-CN') : new Date().toLocaleString('zh-CN'),
            status: item.status !== undefined ? item.status : 0 // 0表示在场，1表示已离场
          }))
          
          // 添加调试信息，查看处理后的临时车辆数据
          console.log('处理后的临时车辆数据:', this.tempEntries);
        })
        .catch(error => {
          console.error('获取停车记录失败:', error)
          // 错误处理：保持tempEntries为空数组
          this.tempEntries = []
        })
    },
    
    addTempEntry() {
      // 添加入场记录逻辑
      alert('添加入场记录功能待实现')
    },
    
    confirmEntry() {
      // 确认入场逻辑
      if (!this.entryForm.plateNumber || !this.entryForm.vehicleType) {
        alert('请填写车牌号和车辆类型')
        return
      }
      
      // 从隐藏域中获取停车场ID
      const parkingSpaceId = this.availableTempSpaceInfo && this.availableTempSpaceInfo.id ? this.availableTempSpaceInfo.id : null;
      
      if (!parkingSpaceId) {
        alert('未获取到可用的停车位信息，请稍后再试')
        // 重新加载随机可用车位信息
        this.loadRandomAvailableTempSpace();
        return;
      }
      
      // 获取用户ID (假设admin对应的用户ID为1)
      const createdBy = 1; // 根据实际情况修改
      
      // 构建请求参数
      const requestParams = {
        plateNumber: this.entryForm.plateNumber,
        ownerName: this.entryForm.owner || '未知',
        phone: this.entryForm.phone || '未提供',
        parkingSpaceId: parkingSpaceId,
        createdBy: createdBy
      }
      
      // 调用后端创建临时停车记录接口 - 使用基于axios.js配置的相对路径
      axios.post('/temp-entry/create-entry', null, {
        params: requestParams
      })
        .then(response => {
          // 由于axios响应拦截器直接返回了response.data
          let result = response || false;
          
          if (result) {
            // 显示成功消息
            alert(`车牌号 ${this.entryForm.plateNumber} 已成功入场`)
            
            // 重新加载临时车辆列表
            this.loadTempEntries();
            
            // 重新加载空闲车位数量
            this.loadAvailableTempSpacesCount();
            
            // 重新加载随机可用车位信息
            this.loadRandomAvailableTempSpace();
            
            // 重置表单
            this.entryForm = {
              plateNumber: '',
              vehicleType: '0', // 默认设置为临时车
              owner: '',
              phone: ''
            }
          } else {
            alert('创建停车记录失败，请稍后再试')
          }
        })
        .catch(error => {
          console.error('调用创建临时停车记录接口失败:', error);
          alert('创建停车记录失败，请稍后再试')
        })
    },
    
    checkOut(id) {
      // 出场处理逻辑
      const entry = this.tempEntries.find(e => e.id === id)
      if (entry) {
        const now = new Date()
        entry.exitTime = now.toLocaleString('zh-CN')
        entry.duration = '3小时'
        entry.fee = '30元'
        entry.status = 1
        alert(`车牌号 ${entry.plateNumber} 已成功出场，费用：${entry.fee}`)
      }
    },
    
    viewDetails(id) {
      // 查看详情逻辑
      alert(`查看记录 ${id} 的详细信息`)
    }
  }
}
</script>

<style >
/* 这里可以添加组件特定的样式 */
</style>